<template>
	<view class="appointment_con">
		<view class="tab_con">
			<u-tabs :list="tabList" active-color="#7D2527" :is-scroll="false" :current="tabCurrent" @change="changeTab"></u-tabs>
		</view>
		
		<view class="top_con">
			<view class="img"></view>
			<view class="info">
				<view class="up">王某某 <span>本人</span></view>
				<view class="center">女 32岁</view>
				<view class="down">1878323222</view>
			</view>
			<view class="btn">切换</view>
		</view>
		<view class="tabs">
			<u-tabs active-color='#7D2527' :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="content">
			<view class="guid" v-for="(val,index) in 6">
				<view class="up">
					<view class="left">王某某</view>
					<view class="right">已预约</view>
				</view>
				<view class="center">
					<view>就诊医生：周雪梅</view> 
					<view>就诊地点：香薷中医诊所</view> 
					<view>就诊时间：2025-09-01 周一下午14:00-15:00</view>
				</view>
				<view class="down">
					<view></view>
					<view class="btn">取消预约</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { myOrderDoctorList,myOrderPatientList } from "@/api/consultation";
	export default {
			data() {
				return {
					tabList: [{
					name: '患者'
				}, {
					name: '医生'
				}],
				tabCurrent: 0,
					current: 0,
	                list: [{
	                    name: '全部',
	                }, {
	                    name: '已预约',
	                }, {
	                    name: '治疗中'
	                }, {
	                    name: '已完成'
	                }, {
	                    name: '已失效'
	                }],
					dataList:[]
				}
			},
			async onLoad() {
				await this.getMyOrderDoctorList()
				// await this.getMyOrderPatientList()
			},
			methods: {
				// 获取我的预约医生
				async getMyOrderDoctorList() {
					const res = await myOrderDoctorList({
						"mobile": '18655358739',
						"status": '',//预约状态：0-已预约、1-治疗中、2-已完成、3-已失效
					})
					if (res.code == 200) {
						this.dataList = res.data.records
					}
					if(res.code ==500){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				},
				// 获取我的预约患者
				async getMyOrderPatientList() {
					const res = await myOrderPatientList({
						"mobile": '18655358739',
						patientCode:'',
						"status": '',//预约状态：0-已预约、1-治疗中、2-已完成、3-已失效
					})
					if (res.code == 200) {
						this.dataList = res.data.records
					}
					if(res.code ==500){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				},
				changeTab(index){
					this.tabCurrent = index;
				},
	            change(index) {
	                this.current = index;
	            }
			}
		}
</script>

<style lang="scss" scoped>
	.appointment_con{
		width:100%;
		height:100%;
		background: #F8F8F8;
		padding: 20rpx 29rpx;
		font-family: PingFang SC, PingFang SC;
		.tab_con{
			margin-bottom: 20rpx;
		}
		.top_con{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 37rpx 46rpx;
			display: flex;
			align-items: center;
			.img{
				width:120rpx;
				height:120rpx;
				border-radius: 50%;
				background: cadetblue;
				margin-right: 30rpx;
			}
			.info{
				font-weight: 400;
				font-size: 30rpx;
				color: #666666;
				margin-right: 35rpx;
				.up{
					display: flex;
					font-weight: 600;
					font-size: 32rpx;
					color: #000000;
					margin-right: 23rpx;
					span{
						background: #FFF1F2;
						border-radius: 5rpx;
						padding: 3rpx 8rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #7D2527;
					}
				}
			}
			.btn{
				background: #7D2527;
				padding: 10rpx 34rpx;
				border-radius: 50rpx;
				color:#fff;
				font-size: 30rpx;
			}
		}
		.tabs{
			margin-bottom: 24rpx;
		}
		.content{
			// margin-top: 30rpx;
			.guid{
				background: #fff;
				padding: 31rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				.up{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8rpx;
					.left{
						font-weight: bold;
					}
					.right{
						color: #7D2527;
					}
				}
				.center{
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
					view{
						margin-bottom: 8rpx;
					}
				}
				.down{
					display: flex;
					justify-content: space-between;
					
					.btn{
						height:60rpx;
						line-height: 60rpx;
						padding: 0 36rpx;
						border-radius: 50rpx;
						color: #7D2527;
						font-size: 30rpx;
						background: rgba(125,37,39,0.2);
						border: 1rpx solid #7D2527;
					}
				}
			}
		}
	}
</style>